<template>
  <div class="app-wrapper">
    <Layout>
      <LayoutSider v-model:collapsed="collapsed" collapsed-width="60" :trigger="null" collapsible theme="light" width="200">
        <MainMenu />
      </LayoutSider>
      <Layout>
        <LayoutHeader class="header-box">
          <div class="h-50px px-15px flex-bc">
            <div class="flex-lc">
              <div class="toggle-box">
                <MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                <MenuUnfoldOutlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
              </div>
              <!-- Breadcrumb面包屑导航 -->
              <Breadcrumb separator="/">
                <Breadcrumb.Item v-for="(tit, index) in titles" :key="index">
                  {{ tit }}
                </Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <UserCenter />
          </div>
        </LayoutHeader>
        <LayoutContent class="content-container">
          <!-- 多标签页 -->
          <TagViews />
          <AppMain />
        </LayoutContent>
      </Layout>
    </Layout>
  </div>
</template>

<script lang="ts" setup>
import { MenuUnfoldOutlined } from '@ant-design/icons-vue'
import { Breadcrumb, Layout, LayoutContent, LayoutHeader, LayoutSider } from 'ant-design-vue'
import AppMain from './components/AppMain.vue'
import MainMenu from './components/MainMenu.vue'
import TagViews from './components/TagViews.vue'
import UserCenter from './components/UserCenter.vue'

const route = useRoute()
const collapsed = ref<boolean>(true)
const titles: string[] = computed(() => {
  return route.matched.map(item => item.meta.title)
})
</script>

<style lang="less" scoped>
.app-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.header-box {
  width: 100%;
  height: 50px;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid rgb(232 232 232);
}

.toggle-box {
  height: 50px;
  margin-right: 10px;
  line-height: 56px;

  .trigger {
    font-size: 20px;

    &:hover {
      color: var(--current-color);
    }
  }
}

.content-container {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: hidden;
}
</style>
